<template>
  <div>
    <div class="blogDetail_box">
      <el-page-header @back="goBack" content="详情"> </el-page-header>
      <div style="display: flex;justify-content: space-between;">
        <h2>{{ orderInfo.title }}</h2>
        <el-popconfirm title="是否确认接单？" @onConfirm="toAcceptOrder(orderInfo.id)" v-if="orderInfo.uid != this.userid">
          <el-button type="primary" slot="reference">确认接单</el-button>
        </el-popconfirm>
      </div>
      <div class="card_detail">
        <div class="rol">
          <i class="el-icon-time"></i>
          <span>发布于</span>
          <span>{{ orderInfo.time }}</span>
        </div>
        <div class="rol" style="border-right: 1.2px solid #ccc">
          <i class="el-icon-location-outline"></i>
          <span>地址</span>
          <span>{{ orderInfo.address }}</span>
        </div>
        <div class="rol" style="border-right: 1.2px solid #ccc">
          <i class="el-icon-position"></i>
          <span>QQ</span>
          <span>{{ orderInfo.qq }}</span>
        </div>
        <div class="rol" style="border-right: 1.2px solid #ccc">
          <i class="el-icon-phone-outline"></i>
          <span>电话</span>
          <span>{{ orderInfo.phone }}</span>
        </div>
        <div class="rol" style="border-right: 1.2px solid #ccc">
          <i class="el-icon-coin"></i>
          <span>酬劳</span>
          <span>¥ {{ orderInfo.price }}</span>
        </div>
        <div class="rol">
          <i class="el-icon-chat-dot-round"></i>
          <span>评论数</span>
          <span>{{ commentTotal }}</span>
        </div>
      </div>

      <el-divider></el-divider>
      <!-- github-markdown样式渲染 -->
       <div class="markdown-body">
         <div class="rol">
           <span>{{ orderInfo.content }}</span>
         </div>
       </div>

      <div class="article_bottom">
        <div class="end_tip">
          <div class="copyright">
            <ul>
              <li><strong>发布人：</strong>{{ orderInfo.nickname }}</li>
            </ul>
          </div>
          <el-tag effect="plain" type="info" v-if="orderInfo.classify === 0"> <i class="el-icon-collection-tag"></i> 楼栋服务 </el-tag>
          <el-tag effect="plain" type="info" v-if="orderInfo.classify === 1"> <i class="el-icon-collection-tag"></i> 代拿代买 </el-tag>
          <el-tag effect="plain" type="info" v-if="orderInfo.classify === 2"> <i class="el-icon-collection-tag"></i> 其他互助 </el-tag>
        </div>
      </div>
    </div>

    <div class="comment_box">
      <div class="comment_tip">
        <span><i class="el-icon-warning-outline"></i>留言说明： </span>
        <p>务必遵守网络评论文明，如果发现恶语攻击，可是会被封号的哦~</p>
        <el-divider></el-divider>
      </div>
      <div>
        <div class="comment_form">
          <el-form
            :model="commentForm"
            :rules="commentRules"
            ref="commentRef"
            label-width="50px"
          >
            <el-row :gutter="10">
              <el-col :span="12">
                <el-form-item label="昵称">
                  <el-input
                    disabled
                    v-model="nickname"
                  ></el-input>
                </el-form-item>
              </el-col>
            </el-row>

            <el-form-item label="内容" prop="content">
              <el-input
                type="textarea"
                rows="8"
                maxlength="254"
                show-word-limit
                v-model="commentForm.content"
              ></el-input>
            </el-form-item>

            <el-form-item>
              <el-button type="primary" @click="CommentSubmit">提交</el-button>
              <el-button @click="CommentReset">重置</el-button>
            </el-form-item>
          </el-form>
        </div>

        <div class="comment_list">
          <div>
            <p>共 {{ commentTotal }} 条评论</p>
          </div>
          <div>
            <ul>
              <li v-for="list in commentList" :key="list.id">
                <div class="lileft">
                  <el-avatar :src=list.avatar></el-avatar>
                </div>
                <div class="liright">
                  <div class="info">
                    <span class="infoUser">{{ list.nickname }}</span>
                    <span class="infoTime">{{ list.time }}</span>
                  </div>
                  <p>{{ list.content }}</p>
                </div>
              </li>

              <div class="comment_end_tip">
                <p>没有更多了~</p>
              </div>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
// 引入github-markdown样式渲染md格式的文档
import 'github-markdown-css'

export default {
  data () {
    return {
      // 用户名
      userid: 0,
      nickname: "",
      // 订单 id
      oid: 0,
      // 订单详情
      orderInfo: {},
      // 评论列表
      commentList: [],
      commentTotal: '',
      commentForm: {
        content: '' // 评论内容
      },
      commentRules: {
        content: [
          { required: true, message: '小主，看都看了，评论一下呗~', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    // 根据 id 获取文章
    async getArticle (oid) {
      const { data: res } = await this.$http.get('/help/nav/details', { params:{oid: oid} })
      console.log(res)
      if (res.success !== undefined) {
        window.location.href = 'http://malloc.press:9000/user/nav/toLogin'
      }
      this.orderInfo = res.details[0]
      this.commentList = res.comment
      this.commentTotal = res.comment.length
    },
    // 提交评论
    async CommentSubmit () {
      const { data: res } = await this.$http.get('/help/nav/addComment', {
        params: {
          uid: localStorage.getItem('userId'),
          oid: this.oid,
          content: this.commentForm.content
        }
      })
      if (res.success !== undefined) {
        window.location.href = "http://malloc.press:9000/user/nav/toLogin"
      }
      await this.getArticle(this.oid)
      this.$refs.commentRef.resetFields()
      return this.$message({
        message: '评论成功!',
        type: 'success'
      });
    },
    // 确认订单
    toAcceptOrder (oid) {
      const that = this;
      that.$http.get('/help/nav/acceptOrder',{params:{uid: localStorage.getItem("userId"),oid: oid}}).then(res => {
        if (res.data.success !== undefined) {
          window.location.href = "http://malloc.press:9000/user/nav/toLogin"
        }
        that.$message({
          message: '请在三天内联系发布者确认，若三天后发布者未确认视为未完成订单！',
          type: 'warning'
        });
      });
      setTimeout(() => {
        this.$router.push('/home')
      }, 1000)
    },
    // 重置评论
    CommentReset () {
      this.$refs.commentRef.resetFields()
    },
    // 返回事件
    goBack () {
      this.$router.push('/home')
    },
  },
  created () {
    // 可以获取路由路径中的路径参数 oid
    const oid = this.$route.params.oid
    this.oid = oid
    this.userid = localStorage.getItem("userId")
    this.nickname = localStorage.getItem("nickname")
    this.getArticle(oid)
  }
}
</script>

<style lang="less" scoped>
.el-button {
  outline: none;
}
.blogDetail_box {
  position: relative;
  min-height: 540px;
  padding: 2% 5%;
  border: 1px solid #eee;
  transition: all 0.5s;
  .el-page-header {
    margin-bottom: 3%;
  }
  .md {
    z-index: 0;
    background-color: rgba(255, 255, 255, 0.2) !important;
    border: none !important;
  }
  .card_detail {
    height: 40px;
    width: 100%;
    font-size: 12px;
    color: #999;
    padding: 10px 0;
    .rol {
      float: left;
      margin-right: 8px;
      i {
        margin-right: 4px;
      }
      span {
        margin-right: 5px;
      }
    }
  }
  .article_bottom {
    bottom: 4%;
    position: absolute;
    width: 90%;
    .end_tip {
      .copyright {
        margin-bottom: 2%;
        ul {
          margin: 2em 0 0;
          padding: 0.5em 1em;
          border-left: 3px solid #ff1700;
          background-color: ivory;
          list-style: none;
          line-height: 2;
        }
      }
      p {
        text-align: center;
        color: #ccc;
        font-size: 16px;
        padding: 20px 0;
      }
    }
  }
}

.blogDetail_box:hover {
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.comment_box {
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  margin-top: 2%;
  padding: 3% 2%;
  .comment_tip {
    span {
      i {
        margin-right: 3px;
        color: red;
        font-weight: bold;
      }
    }
    p {
      margin-top: 1%;
    }
    .el-divider {
      height: 0.5px;
    }
  }
  .comment_list {
    margin-top: 3%;
    margin-bottom: 4%;
    position: relative;
    ul {
      margin-top: 3%;
      list-style: none;
      padding: 0 !important;
      li {
        min-height: 110px;
        padding: 10px 0;
        margin: 1% 0;
        border-bottom: 1px solid #eee;
        .lileft {
          float: left;
          margin: 0 2%;
        }
        .liright {
          p {
            color: #303133;
          }
          .info {
            margin-bottom: 1%;
            display: flex;
            justify-content: space-between;
            align-items: center;
            .infoUser {
              color: #1abc9c;
            }
            .infoTime {
              color: #999;
              font-size: 12px;
            }
          }
        }
      }
      .comment_end_tip {
        p {
          text-align: center;
          color: rgb(34, 33, 33);
        }
      }
    }
  }
}
</style>
<style lang="less">
.el-avatar>img{
  width: 100%;
}
</style>
